<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs"><span class="iconfont">&#xe677;</span></router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opcityStyle">
      <router-link to="/"><div class="iconfont header-fixed-back">&#xe677;</div></router-link>
      景点详情
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default{
    name:'Header',
    data(){
      return {
        showAbs:true,
        opcityStyle:{
          opacity:0
        }
      }
    },
    methods:{
      handleScroll(){
        const top = document.documentElement.scrollTop
        if(top > 60){
          let opacity = top/140
          opacity = opacity >1 ? 1:opacity
          this.opcityStyle = { opacity }
          this.showAbs = false
        }else{
          this.showAbs=true
        }
      }
    },
    activated() {
      window.addEventListener('scroll',this.handleScroll)
    },
    deactivated() {
      window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="stylus" scpoed>
@import '~@/assets/styles/varibles.styl'

.header-abs
  position absolute
  left 0
  top 0
  padding 10px
  font-size 20px
  color #fff
.header-fixed
  z-index 2
  position fixed
  top 0
  right 0
  left 0
  text-align center
  line-height 0.84rem
  background $bgColor
  color #fff
  .header-fixed-back
    display inline-block
    position absolute
    top 0
    left 0
    vertical-align top
    padding 0 10px
    font-size 21px
    color #fff
</style>
